<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../../dashboard/mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons1')

      this.chart.setOption({
        color: ['#6a60ea'],
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c} 次',
        },
        legend: {},
        grid: {
          left: '0%',
          top: '0%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01]
          splitLine: {
            show: false,
          },
          axisLabel: { //轴文字标签
            show: false,
            textStyle: {
              color: '#999',
            },
          },
          axisTick: { //刻度线
            show: false,
          },
          axisLine:{
            show: false,
            lineStyle:{
              color:'#999',
              width: 1,//这里是为了突出显示加上的
            }
          },
          splitArea: { "show": true, "areaStyle": { "color": ["#fff"] }}
        },
        yAxis: {
          type: 'category',
          data: [ '操作失误', '材料不匹配', '传感器失效', '电压过高','温度过高', '设备过载', '继电器故障'],
          nameLocation: 'end',
          scale: true, //自适应
          axisTick: {//坐标轴刻度与标签对齐
            alignWithLabel: true,
          },
          axisLine:{
            show: false
          },
          axisLabel: { //轴文字标签
            show: true,
            textStyle: {
                color: '#999',
            }
          },
        },
        series: [
          {
            // name: '2011',
            type: 'bar',
            data: [ 10, 18, 23, 26, 29, 30, 63,],
            barWidth: 10,
            backgroundStyle: {
              color: 'rgba(0,0,0,0)'
            },
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [8, 8, 8, 8]
              }
            },
          },
          
        ],
        grid: {
          left: '1%',
          right: '2%',
          top: '3%',
          bottom: '2%',
          containLabel: true
        },
      })
    }
  }
}
</script>
